<script setup>

import ScopeSlot from "./ScopeSlot.vue";
</script>

<template>
  <ScopeSlot></ScopeSlot>

  <hr>

  <!--传统写法/经典写法-->
  <ScopeSlot>
    <template v-slot:info="scope">
      <ul>
        <li>姓名：{{ scope.fullName}}</li>
        <li>性别：{{ scope.gender }}</li>
        <li>年龄：{{ scope.age }}</li>
      </ul>
    </template>
  </ScopeSlot>

  <hr>

  <!--解构写法-->
  <ScopeSlot>
    <template v-slot:info="{fullName, gender, age }">
      <ul>
        <li>姓名：{{ fullName}}</li>
        <li>性别：{{ gender }}</li>
        <li>年龄：{{ age }}</li>
      </ul>
    </template>
  </ScopeSlot>
</template>

<style scoped>

</style>